import React, { Component } from 'react';
import { connect } from 'react-redux'
import styles from './css/CanvasLoading.module.css';
import { drawLines, drawMain } from './js/canvas'
class CanvasLoading extends Component {
    constructor(props) {
        super(props);
        this.state = {
            canvasOptions: {
                startPoint: 0,
                stopPoint: 50
            },
            theme: {
                primaryColor: '#2D8DFB'
            }
        }
    }

    componentDidMount() {
        let stepCanvas = this.refs.stepCanvas;
        let linesCanvas = this.refs.linesCanvas;
        stepCanvas.width = linesCanvas.width = 300;
        stepCanvas.height = linesCanvas.height = 300;
        this.startCanvas();
    }

    startCanvas = () => {
        let StepCanvas = document.getElementById('stepCanvas');
        let linesCanvas = document.getElementById('linesCanvas');
        let { startPoint, stopPoint } = this.state.canvasOptions;
        let color = this.state.theme.primaryColor;
        let stepTime = 80;
        drawMain(StepCanvas, startPoint, stopPoint, color)
        drawLines(linesCanvas, color)
        const timer = setInterval(() => {
            if (startPoint >= stopPoint) {
                clearInterval(timer);
                drawMain(StepCanvas, startPoint, stopPoint, color);
                this.setState({
                    canvasOptions: {
                        startPoint: ++startPoint,
                        stopPoint: 100
                    }
                }, () => {
                    this.accelerate();
                })
                return
            }
            ++startPoint
            this.setState({
                startPoint: startPoint
            })
            drawMain(StepCanvas, startPoint, stopPoint, color)
        }, stepTime)
    }

    accelerate = () => {
        let StepCanvas = document.getElementById('stepCanvas');
        let linesCanvas = document.getElementById('linesCanvas');
        let { startPoint, stopPoint } = this.state.canvasOptions;
        let color = this.state.theme.primaryColor;
        let stepTime = 20;
        drawMain(StepCanvas, startPoint, stopPoint, color)
        drawLines(linesCanvas, color)
        const timer = setInterval(() => {
            console.log('accelerate');
            if (startPoint >= stopPoint) {
                console.log('startPoint', startPoint);
                console.log('stopPoint', stopPoint);
                clearInterval(timer);
                drawMain(StepCanvas, startPoint, stopPoint, color);
                return
            }
            ++startPoint
            this.setState({
                startPoint: startPoint
            })
            drawMain(StepCanvas, startPoint, stopPoint, color)
        }, stepTime)
    }





    render() {
        return (
            <div>
                <p>CanvasLoading</p>
                <div className={styles.container}>
                    <canvas id="linesCanvas" className={styles.linesCanvas} ref="linesCanvas"></canvas>
                    <canvas id="stepCanvas" className={styles.stepCanvas} ref="stepCanvas" ></canvas>
                </div>
            </div>
        )
    }

}

export default connect()(CanvasLoading);